<template>
  <div class="userList">
    <!-- user information -->
    <div class="topInfo">
      <el-row :span="24" class="myInfo">
        <el-col :span="6" class="headPortrait">
          <!-- <img class="userImg" src="../../assets/imgs/logo.png" alt=""> -->
        </el-col>
        <el-col :span="16" class="myAccounts">
          <div>账号：{{userID}} </div>
          <div class="myTitle" v-if="user.level===3"><span class="el-icon-star-on">&nbsp;区域代理商</span></div>
          <div class="myTitle" v-else-if="user.level===1"><span class="el-icon-star-on">&nbsp;消费商</span></div>
          <div class="myTitle" v-else-if="user.level===2"><span class="el-icon-star-on">&nbsp;经销商</span></div>
          <div class="myTitle" v-else><span class="el-icon-star-on"> &nbsp;消费者</span></div>
        </el-col>
        <el-col :span="24" class="boderBottom"></el-col>
        <!-- <span class="quit" @click="quit">退出</span> -->
      </el-row>
    </div>
    <!-- user menu -->
    <div class="userMenu">
      <el-row :span="24" class="projects">
        <el-col :span="24"  @click.native="geTotal()">
          <div class="projectName">总收益<i class="icon icon1"></i></div>
          <div class="projectContent"></div>
          <div><i class="el-icon-arrow-right"></i></div>
        </el-col>
        <el-col :span="24"  @click.native="getPersonData()">
          <div class="projectName">个人资料<i class="icon icon2"></i></div>
          <div class="projectContent"></div>
          <div><i class="el-icon-arrow-right"></i></div>
        </el-col>
        <el-col :span="24" v-if="user.level===3"  @click.native="getAreaOrder()">
          <div class="projectName">区域业绩<i class="icon icon1"></i></div>
          <div class="projectContent"></div>
          <div><i class="el-icon-arrow-right"></i></div>
        </el-col>
        <el-col :span="24"  @click.native="fenxiao()">
          <div class="projectName">我的分销<i class="icon icon1"></i></div>
          <div class="projectContent"></div>
          <div><i class="el-icon-arrow-right"></i></div>
        </el-col>
        <el-col :span="24"  @click.native="changePsWord()">
          <div class="projectName">修改密码<i class="icon icon4"></i></div>
          <div class="projectContent"></div>
          <div><i class="el-icon-arrow-right"></i></div>
        </el-col>
         <el-col :span="24"  @click.native="getUs()">
          <div class="projectName">关于我们<i class="icon icon1"></i></div>
          <div class="projectContent"></div>
          <div><i class="el-icon-arrow-right"></i></div>
        </el-col>
      </el-row>
    </div>
    <!-- 邀请好友 -->
    <!-- <el-button type="danger" class="inviteBtn" @click="invite">邀请好友</el-button> -->
    <el-button type="danger" class="inviteBtn" @click="quit">退出</el-button>
  </div>
</template>

<script type="text/ecmascript-6">
import {removeSession} from '../common/sessionStorage'
export default {
  components: {
    removeSession
  },
  created () {
    this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUser/userAccountInfo.shtml', { token: this.$store.state.token }, {
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      emulateJSON: true
    }).then((data) => {
      this.totalCms = data.body.userAccountInfo.totalCms
      this.curCms = data.body.userAccountInfo.curCms
      this.userID = data.body.userAccountInfo.userID
      console.log(data)
    }, (ne) => {
      this.$message({
        message: '网络错误',
        type: 'error',
        duration: 1000,
        showClose: false
      })
    })
  },
  data () {
    return {
      userID: '',
      totalCms: '',
      curCms: ''
    }
  },
  methods: {
    geTotal () {  // 总收益跳转
      this.$router.push('/user/total')
    },
    getPersonData () {
      this.$router.push('/user/personData')
    },
    fenxiao () {
      this.$router.push('/user/fenxiao')
    },
    getRecord () { // 跳转到提现记录
      this.$router.push('/user/record')
    },
    goWithdrawals () { // 跳转到提现
      this.$router.push('/user/withdrawals')
    },
    getBankCard () { // 跳转到银行卡
      this.$router.push('/user/bankcard')
    },
    getAddress () { // 跳转到地址栏
      this.$router.push('/user/address')
    },
    getCommission () { // 跳转到佣金明细
      this.$router.push('/user/commission')
    },
    getAreaOrder () { //  跳转至区域业绩
      this.$router.push('/user/areaOrder')
    },
    getDisOrder () { // 跳转至分销订单
      this.$router.push('/user/disOrder')
    },
    getDistributor () { // 跳转至分销商
      this.$router.push('/user/distributor')
    },
    invite () { // 我的邀请码
      this.$router.push('/user/code')
    },
    changePsWord () {   // 修改密码
      this.$router.push('/user/changePsWord')
    },
    getUs () {
      this.$router.push('/user/aboutUs')
    },
    quit () { //  退出登陆
      this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUserLogin/loginOut.shtml', { token: this.$store.state.token }, {
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        emulateJSON: true
      }).then((data) => {
        removeSession('setUser')
        removeSession('setToken')
        this.$message({
          message: '退出成功',
          type: 'success',
          duration: 1000,
          showClose: false
        })
        this.$router.push('/')
      }, (ne) => {
        this.$message({
          message: '网络错误',
          type: 'error',
          duration: 1000,
          showClose: false
        })
      })
    }
  },
  computed: {
    user: function () {
      return this.$store.state.user
    }
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
  .userList{
      .inviteBtn{
      width:80%;
    }
  }
  .myInfo{
    height: 160px;
    background: url('../../assets/imgs/bg.png') center  -168px no-repeat;
    /*background-color: #05D26B;*/
    padding:40px 15px 10px 15px;
    .quit{
      position: absolute;
      font-size: 15px;
      width: 40px;
      right: 19px;
      top: 25px;
      color: #fff;
    }
    .headPortrait{
      width: 65px;
      height:65px;
      margin-right:20px;
      background: url('../../assets/imgs/logo.png') center  -7px no-repeat;
      background-size: cover;
    }
    .myAccounts{
      text-align: left;
      color: #fff;
      padding-left: 10px;
      font-size: 14px;
      margin-top:8px;
      .myTitle{
      margin-top:10px;
        font-size: 14px;
        span{
          background-color: #0DB85C;
          border-radius: 10px;
          padding: 2px 8px;
        }
      }
    }
    .boderBottom{
      padding-top: 10px;
      margin-bottom: 40px;
    }
  }
  .userMenu{
    height: 410px;
    .el-icon-arrow-right{
      color:#ccc;
      font-size:12px;
    }
    .icon{
      width:19px;
      height:18px;
      position: absolute;
      top: 16px;
      left: -21px;
    }
    .icon1{
      background: url('../../assets/imgs/icon02@2x.png') no-repeat;
      background-size:cover;
    }
    .icon2{
      background: url('../../assets/imgs/icon03@2x.png') no-repeat;
      background-size:cover;
    }
        .icon3{
      background: url('../../assets/imgs/icon04@2x.png') no-repeat;
      background-size:cover;
    }
        .icon4{
      background: url('../../assets/imgs/icon05@2x.png') no-repeat;
      background-size:cover;
    }
        .icon5{
      background: url('../../assets/imgs/icon06@2x.png') no-repeat;
      background-size:cover;
    }
    .projects{
      font-size:14px;
    padding:0 10px 0 40px;
      >.el-col-24{
         text-align: left;
         height: 50px;
         line-height: 50px;
         border-bottom: 1px solid #e3e3e3;
         display:flex;
    .projectName{
      padding-left: 5px;
      position: relative
    }
    .projectContent{
      flex:1;
    }
    .gocash{
      color:red;
      border:1px solid red;
      font-size:10px;
      border-radius:3px;
      margin-left:5px;
      padding:1px;
    }
       }
    }
  }
</style>
